import React, { useEffect, useState } from 'react';
import './css/ReviewList.css';
import { Avatar, Button, List, Skeleton } from 'antd';
import axios from "axios";
import {Content} from "../utils/Content";
const count = 3;
const dataUrl = `http://localhost:5532/review/getReviewList`;

const ReviewList = () => {
    const [initLoading, setInitLoading] = useState(true);
    const [loading, setLoading] = useState(false);
    const [data, setData] = useState([]);
    const [list, setList] = useState([]);
    const [page, setPage] = useState(0);
     useEffect(() => {
        axios.get(dataUrl+"?page="+page)
            .then((res) => {
                setPage(page+1)
                return res.data.data
            })
            .then((res) => {
                setInitLoading(false);
                setData(res);
                setList(res);
            });
    }, []);
    const onLoadMore = () => {
        setLoading(true);

        axios.get(dataUrl+"?page="+page)
            .then((res) => {
                setPage(page+1)
                return res.data.data
            })
            .then((res) => {
                const newData = data.concat(res);
                setData(newData);
                setList(newData);
                setLoading(false);
                window.dispatchEvent(new Event('resize'));
            });
    };
    const loadMore =
        !initLoading && !loading ? (
            <div
                style={{
                    textAlign: 'center',
                    marginTop: 12,
                    height: 32,
                    lineHeight: '32px',
                }}
            >
                <Button onClick={onLoadMore}>加载更多</Button>
            </div>
        ) : null;
    return (
        <List
            className="reviewList"
            loading={initLoading}
            itemLayout="horizontal"
            loadMore={loadMore}
            dataSource={list}
            renderItem={(item) => (
                <List.Item>
                    <Skeleton avatar title={false} loading={item.loading} active>
                        <List.Item.Meta
                            avatar={<Avatar src={Content.DEFAULT_AVATAR} />}
                            title={<a href="#">{item.name}</a>}
                            description={item.comment}
                        />
                        <div>{item.service}</div>
                    </Skeleton>
                </List.Item>
            )}
        />
    );
};
export default ReviewList;